
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>OSM</title>
    <style type="text/css">
        body{
            margin: 0;
            overflow: hidden;
            background: #fff;
        }
        #map{
            position: relative;
            height: 553px;
            border:1px solid #3473b7;
            top: 10px;
        }
    </style>
    <link href='./css/bootstrap.min.css' rel='stylesheet' />
    <link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
    <script src = '../libs/SuperMap.Include.js'></script>
    <script type="text/javascript">
        var map, osmLayer,pointVector,vector,dataAdded=false;
        function init(){
            map = new SuperMap.Map("map",{controls:[
                new SuperMap.Control.Navigation() ,
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.LayerSwitcher(),
                new SuperMap.Control.MousePosition()
            ]});
            osmLayer = new SuperMap.Layer.OSM();
            vector = new SuperMap.Layer.Vector("vector");
            map.addLayers([osmLayer,vector]);
            addData();
            var bounds = new SuperMap.Bounds(-33554432,-33554432,33554432,33554432);
            map.zoomToExtent(bounds);
        }

        function addData(){
            if(!dataAdded)
            {
                vector.removeAllFeatures();
                //点对象
                var point= new SuperMap.Geometry.Point(0,0);
                var pointVector = new SuperMap.Feature.Vector(point);
                pointVector.style={
                    fillColor:"red",
                    strokeColor:"yellow",
                    pointRadius:10
                };

                vector.addFeatures([pointVector]);
                dataAdded=true;
            } else{
                alert("数据已加载。");
            }
        }
    </script>
</head>
<body onLoad = "init()">
<div id = "map"></div>
</body>
</html>